<template>
  <div class="like">
    <div class="title">
      猜你喜欢
    </div>
    <div class="goods-list">
      <div
        v-for="(item,index) in LikeList"
        :key="index"
        class="goods-item"
        @click.stop="todetail(item.goods)"
      >
        <div class="goods-img">
          <img
            :src="item.goods.defaultAlbum"
            alt=""
          >
        </div>
        <div class="goods-info">
          <div class="goods-info-left">
            <div class="name">
              {{ item.goods.cProductShowName }}
            </div>
            <div class="price_box">
              <div class="price">
                ￥{{ item.goods.fSalePrice }}
              </div>
              <div class="text">
                已有{{ item.goods.iSales }}人付款
              </div>
            </div>
          </div>
          <div class="goods-info-right">
            <img
              class="item_img"
              :src="item.FocusStatus? guanzhu : notguanzhu"
              @click.stop="focus(item)"
            >
          </div>
        </div>
      </div>
    </div>
    <!-- <div
      v-if="lastPage > page"
      class="more"
      @click="getMore"
    >
      点击加载更多+
    </div>
    <div
      v-else
      class="more"
    >
      没有更多
    </div> -->
  </div>
</template>

<script>
	import guanzhu from '../../assets/img/zan_selected.png'
	import notguanzhu from '../../assets/img/zan.png'
	export default {
		name: "",
		components: {},
		props: {
			shopid: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				notguanzhu: notguanzhu,
				guanzhu: guanzhu,
				SmallSellCakesListLikeList: [],
				LikeList: [], // 数据
				lastPage: 0,
				PageTotal: 0, // 总条目数
				page: 1,
				FavorList: [], // 关注列表（查询该商品是否被关注）
			};
		},
		mounted() {
			this.getData(this.shopid);
		},
		methods: {
			// 刷新组件
			UpList() {
				this.SmallSellCakesListLikeList = []
			},
			// 获取列表
			getData(shop_id) {
				let params = {
					limit: 1000,
					page: this.page,
					shop_id: shop_id
				}
				this.$api.commit.GetShopHotGoods(params).then(res => {
					this.SmallSellCakesListLikeList = res.data.data;
					console.log('首页猜你喜欢列表', this.SmallSellCakesListLikeList)
					this.GetGoodsShowData(this.SmallSellCakesListLikeList) // 获取详情
				})
			},
			// 获取详情
			GetGoodsShowData(arrdata) {
				let NewArrData = [] // 处理结束数组
				arrdata.forEach(element => {
					let goodData = {
						queryCondition: {
							order: {
								fieldname: 'iOrder',
								direction: 'asc'
							}, // 排序方式
							pageindex: 1,
							pagesize: 10000,
							where: [{
								fieldname: "goods_id", // 商品id
								valuefrom: element.goods_id,
							}],
						},
					}
					this.$api.commit.GetProductList(goodData).then(res => {
						if (res.data.data.length > 0) {
							element.goods = res.data.data[0]
							NewArrData.push(element)
							this.LikeList = NewArrData
							this.getProductFavorites() // 获取个人收藏列表
						} else {
							console.log('未找到相关数据')
							this.LikeList = NewArrData
							this.getProductFavorites() // 获取个人收藏列表
						}
					})
				})
			},
			// 获取个人收藏列表
			getProductFavorites() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						classId: '',
						productName: '',
						tagId: '',
						currentPage: 1,
						pagesize: 10000,
					}
				}
				this.$api.person.getProductFavorites(params).then(res => {
					if (res.code == 200) {
						this.FavorList = res.data.pager.data
						console.log('数据列表', this.SmallSellCakesListLikeList)
						this.SearchFavorites(this.FavorList, this.SmallSellCakesListLikeList)
					}

				})
			},
			// 查询该商品是否被关注
			/**
			 * FavorList 关注列表
			 * LikeList 商品信息列表
			 */
			SearchFavorites(FavorList, LikeList) {
				console.log('猜你喜欢关注列表', FavorList, LikeList)
				LikeList.forEach(element => {
					let results = FavorList.map(a => `${a.pid}`).indexOf(element.goods_id)
					if (results === -1) {
						this.$set(element, 'FocusStatus', false)
					} else {
						this.$set(element, 'FocusStatus', true)
					}
				})
			},
			// 关注
			focus(focus) {
				console.log('关注', focus)
				if (focus.FocusStatus) {
					let del = {
						token: localStorage.getItem('token'),
						data: {
							productId: focus.goods.pid
						}
					}
					this.$api.good.delFavoritesByProductId(del).then(res => {
						if (res.code == 200) {
							this.getData(this.shopid);
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					});
				} else {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							iShopIds: focus.shop_id,
							ids: focus.goods.pid
						}
					}
					this.$api.good.addToCollect(params).then(res => {
						if (res.code == 200) {
							this.getData(this.shopid);
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					})
				}
			},
			todetail(item) {
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: item.pid,
						iShopId: item.iShopId
					},
				});
			},
			getmore() {
				this.page++;
				this.getData();
			},
		},
	};
</script>

<style scoped lang="scss">
	.like {
		padding: 0 16.19rem;
		margin-top: 2.19rem;
		display: flex;
		flex-direction: column;

		.title {
			width: 11.25rem;
			height: 3.44rem;
			background: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(234, 234, 234, 1);
		}

		.goods-list {
			margin-top: 1.88rem;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.goods-item {
				width: 18rem;
				height: 25.88rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 2.38rem;
				margin-bottom: 2.38rem;
				cursor: pointer;
				background: #fff;
				padding: 1rem;

				&:first-child {
					margin-left: 0;
				}

				&:nth-child(5n) {
					margin-left: 0;
				}

				.goods-img {
					width: 100%;
					height: 20.94rem;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;

					img {
						width: 16rem;
						height: 16rem;
						object-fit: contain;
					}
				}

				.goods-info {
					width: 17.1rem;
					margin-top: 1.5rem;
					height: 6rem;
					display: flex;
					justify-content: space-between;
					align-content: center;

					.goods-info-left {
						display: flex;
						flex-direction: column;
						width: 80%;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;

						.name {
							font-size: 1.13rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
							display: flex;
							align-items: center;
							height: 3rem;
						}

						.price_box {
							display: flex;
							align-items: center;
							height: 3rem;

							.price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
							}

							.text {
								font-size: .8rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #666;
								margin-left: 1rem;
								margin-top: .7rem;
							}
						}
					}

					.goods-info-right {
						display: flex;
						align-items: center;
						justify-content: center;

						.item_img {
							width: 1.5rem;
							height: 1.4rem;
						}
					}
				}
			}
		}
	}

	.more {
		font-size: 1rem;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 1.95rem;
		text-align: center;
		margin: 3.13rem auto;
		cursor: pointer;
	}
</style>
